<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./libs/layui/css/layui.css">
  <script src="./libs/jquery.min.js"></script>
  <script src="./libs/layui/layui.js"></script>
  <title>选择考试</title>
  <style>
    .header {
      min-width: 931px;
      height: 90px;
      line-height: 90px;
      font-size: 30px;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
      background-color: #0B57BF;
    }

    .main-content {
      min-width: 931px;
      background: linear-gradient(180deg, #f4f9fd, #f7f9fc);
      background-image: url('./imgs/sourcebg.png');
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      height: calc(100vh - 90px);
      line-height: 14px;
      font-size: 14px;
      font-weight: 400;
      padding-top: 80px;
      box-sizing: border-box;
      box-shadow: none;
    }

    .listItem {
      width: 886px;
      /* height: 96px; */
      background: #ffffff;
      border: 1px solid #DCDFEA;
      border-radius: 5px;
      position: relative;
      padding: 20px;
      margin: 0 auto;
      margin-bottom: 20px;
    }

    #listView>div:hover {
      border: 1px solid #DBDFEA;
      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.10);
    }

    .contentTop {
      line-height: 1;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }

    .contentCenterBox {
      display: inline-block;
      width: 803px;
      padding-top: 15px;
    }

    .contentCenter {
      margin-bottom: 15px;
      color: #333333;
    }

    .contentCenter .subTitle {
      color: #777777;
    }

    .contentCenter .subTitle+span {
      margin-right: 40px;
    }

    .enterBtn {
      width: 78px;
      height: 30px;
      line-height: 30px;
      background: #0b57bf;
      border-radius: 5px;
      vertical-align: top;
    }

    .contentBottom {
      color: #E22D2C;
    }

    .contentBottom img {
      width: 14px;
      height: 14px;
    }
  </style>
</head>

<body>
  <header class="header"></header>
  <main class="main-content">
    <div id="listView"></div>
  </main>
</body>
<script id="listTpl" type="text/html">
   {{# layui.each(d.list, function(index, item){ }}
    <div class="listItem">
        <div class="contentTop">{{item.name}}</div>
        <div class="contentCenterBox">
        <p class="contentCenter">
          <span class="subTitle">考试开始时间：</span> <span>{{item.start}}</span>
          <span class="subTitle">考试截止时间：</span> <span>{{item.end}}</span>
          <span class="subTitle">考试时长：</span> <span>{{item.duration}}</span>
        </p>
        {{#  if(item.title){ }}
        <p class="contentBottom">
          <img src="./imgs/路径 9.png" style="display: inline-block;" >
          <span>{{item.title}}</span>
        </p>
        {{#  } }} 
      </div>
      <button type="button" class="layui-btn enterBtn" data-examid="{{item.examid}}">进入</button>
    </div>
    {{# }); }}
</script>
<script>
  layui.use(['laytpl'], function () {
    var laytpl = layui.laytpl,
      getTpl = listTpl.innerHTML,
      view = document.getElementById('listView');
    // 获取标题
    $('.header').text('职领未来教育系统')

    // 请求获取考试列表
    var data = { //数据
      list: [
        {
          examid: 'qqq111',
          name: '信息系统运维管理-2024年9月第一批考试',
          start: '2024-08-28  09:00',
          end: '2024-08-29  11:00',
          duration: '120分钟',
          title: '请参加信息系统运维管理大课堂的同学选择此考试，如已获取证书，请勿重复参加考试',
        },
        {
          examid: 'qqq222',
          name: '信息系统运维管理-2024年9月第一批考试2',
          start: '2024-08-28  09:00',
          end: '2024-08-29  11:00',
          duration: '120分钟',
          // title: '请参加信息系统运维管理大课堂的同学选择此考试，如已获取证书，请勿重复参加考试',
        },
        {
          examid: 'qqq333',
          name: '信息系统运维管理-2024年9月第一批考试3',
          start: '2024-08-28  09:00',
          end: '2024-08-29  11:00',
          duration: '120分钟',
          // title: '请参加信息系统运维管理大课堂的同学选择此考试，如已获取证书，请勿重复参加考试',
        }
      ]
    }
    // 判断是否跳转至登录页
    if (data.list.length > 1) {
      laytpl(getTpl).render(data, function (html) {
        view.innerHTML = html;
      });
    } else {
      window.location.href = './login.html'
    }
    // 点击进入
    $('.enterBtn').click(function () {
      console.log($(this).data('examid'));
      // window.location.href = './login.html'
    })
  });
</script>

</html>